<template>
  <section id="data-section" class="data-section" ref="datasec">
    <!-- 单个数据  -->
    <div class="data-piece">
      <!-- 图标 -->
      <i class="fas fa-code"></i>
      <!-- 数据 -->
      <div class="num">156</div>
      <!-- 单位 -->
      <div class="data-desc">行代码</div>
    </div>
    <div class="data-piece">
      <i class="fas fa-award"></i>
      <div class="num">288</div>
      <div class="data-desc">个奖项</div>
    </div>
    <div class="data-piece">
      <i class="fas fa-laugh-wink"></i>
      <div class="num">1588</div>
      <div class="data-desc">位客户</div>
    </div>
    <div class="data-piece">
      <i class="fas fa-folder"></i>
      <div class="num">200</div>
      <div class="data-desc">个项目</div>
    </div>

    <!-- <div class="teste2"></div> -->
  </section>
</template>

<script>
// import debounce from "lodash/debounce";

export default {
  props: [],
  data() {
    return {};
  },
  mounted() {
    // const dataSectionEl = document.querySelector(".data-section");
    this.setopparallax();
    this.setupcountanimate();
  },
  methods: {
    setopparallax() {
      // datasec
      const dataSectionEl = this.$refs.datasec;

      const fn = () => {
        const bottom = dataSectionEl.getBoundingClientRect().bottom;
        const top = dataSectionEl.getBoundingClientRect().top;
        // 如果在可见区域内
        if (bottom >= 0 && top <= window.innerHeight) {
          dataSectionEl.style.backgroundPosition = `center calc(50% - ${bottom /
            5}px)`;
        }
      };
      // 数据，背景视差滚动
      window.addEventListener("scroll", fn);
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("scroll", fn);
      });
    },
    setupcountanimate() {
      this.$sr.reveal(".data-section", {
        beforeReveal: () => {
          // 在展示之前，加载anime动画，使数据从0增长到定义好的数值
          this.$anime({
            targets: ".data-piece .num",
            innerHTML: el => {
              return [0, el.innerHTML];
            },
            duration: 2000,
            round: 1,
            easing: "easeInExpo"
          });

          //
          const dataSectionEl = this.$refs.datasec;

          dataSectionEl.style.backgroundPosition = `center calc(50% - ${dataSectionEl.getBoundingClientRect()
            .bottom / 5}px)`;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/scss/_variables.scss";
/* ============= 数据区域 ================== */

/* 数据 */
.data-section {
  position: relative;
  z-index: 20;
  /* 4列布局 */
  display: grid;
  align-items: center;
  justify-content: center;
  max-width: unset;
  width: 100vw;
  height: 255px;
  /* 背景，自动拉伸，取中间部分 */
  background-image: url("https://itjchome.oss-cn-shenzhen.aliyuncs.com/offweb/databg.jpg");
  background-position: center;
  background-size: cover;

  grid-template-columns: repeat(4, minmax(auto, 220px));
}

/* 背景遮罩 */
.data-section::before {
  position: absolute;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: $backdrop-color;
  content: "";
}

/* 每个数据项的样式 */
.data-piece {
  position: relative;
  z-index: 40;
  display: grid;
  width: 250px;
  color: white;

  grid-template-rows: repeat(3, 1fr);
  justify-items: center;
}

/* 数据图标 */
.data-piece i.fas {
  font-size: 44px;
}

/* 数据数字 */
.data-piece .num {
  margin-top: 7px;
  font-weight: 600;
  font-size: 41px;
}

/* 数字单位 */
.data-piece .data-desc {
  font-weight: 500;
  font-size: 18px;
}

@media (max-width: 922px) {
  .data-section {
    padding: 24px 0;
    /* 加大高度 */
    height: auto;
    background-size: 200%;
    // 原来设置  grid-template-rows: repeat(3, 1fr);
    /* 每列最小宽度为200象素，最大为自动 */

    grid-template-columns: repeat(2, minmax(200px, auto));
    row-gap: 24px;
  }
}
// /* 小于768象素时 */
@media (max-width: 768px) {
  /* 数据部分设置为两列布局 */

  /* 数据部分设置为1列 */
  .data-section {
    /* 增加背景尺寸 */
    background-size: 320%;

    // grid-template-columns: 1fr;
  }
}
</style>
